<template>
  <!--
      1. 表单校验
      Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可
     2. 通过设置 label-position 属性可以改变表单域标签的位置，可选值为 top、left，当设为 top 时标签会置于表单域的顶部
     3.:inline="true"   设置 inline 属性可以让表单域变为行内的表单域
     4. ref="form"    ref是vue中获取节点对象的一个标识  this.$refs[标识]
  -->
    <div id="form">
        <h2>Form 表单使用方式</h2>
        <el-form ref="form"  :inline="true" :model="form" label-width="80px" :rules="rules" :label-position="labelPosition">
            <el-form-item label="名称" prop="name">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="form.password"></el-input>
            </el-form-item>
            <el-form-item label="活动形式" prop="desc">
                <el-input type="textarea" v-model="form.desc"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit('form')">立即创建</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
    </div>


</template>

<script>
export default {
    name: "FormView",
    data() {
        return {
            labelPosition: 'left',
            form: {
                name: '测试数据',
                desc: '测试数据',
                password: ''
            },
            rules: {
                name: [ //  prop
                    //   required  必填  message: 提示信息  trigger: 校验规则触发的时机
                    {required: true, message: '请输入活动名称', trigger: 'blur'},
                    // min 字符串的最小长度   max  最大长度  trigger: 校验规则触发的时机
                    {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                ],
                desc: [
                    {required: true, message: '请填写活动形式', trigger: 'blur'}
                ],
                password: [
                    {required: true, message: '请填写密码', trigger: 'blur'},
                    {min: 8, max: 16, message: '长度在 8 到 16 个字符', trigger: 'blur'}
                ]
            }
        }
    },
    methods: {
        /*
            this.$refs   获取当前组件对象中所有含有ref属性的节点对象
        *  this.$refs[formName]    表单对象
        *  ref属性
        * */
        onSubmit(formName) {
            this.$refs[formName].validate((valid) => {
                // 校验通过  valid  true   否则  false
                if (valid) {
                    console.log('submit!', JSON.stringify(this.form));
                    //  发送异步请求
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });

        }
    }
}
</script>

<style scoped>
#form {
    width: 70%;
}
</style>